<template>
	<view class="app-public-app-login e-p-l-60 e-p-r-60" :style="[AppSkinVar]">
		<view class="e-p-t-80 e-p-b-80 ">
			<text class="e-font-56 fw-600 ">{{ toI18('登录') }}</text>
		</view>
		<view class="app-public-app-login__tabs e-m-b-30">
			<e-tabs :list="[{name:toI18('手机')},{name:toI18('邮箱')}]" :lineColor="AppSkin.primary" :scrollable="false"
				activeStyle="font-weight: 600" @change="tabChange"></e-tabs>
		</view>

		<!-- <view class="app-public-app-login__tabs e-rela e-m-b-60 e-flex-xy-center"
			:class="[loginType === 1 ? 'is-active-left': 'is-active-right' ]" v-if="registerModel.length > 1">
			<view class="e-flex-2 e-flex-xy-center">
				<view class="app-public-app-login__tabs__item " @tap="loginType = 1">
					<text class="keep-all" :class="{'c-333 fw-600': loginType === 1}">{{toI18('手机')}}</text>
				</view>
			</view>
			<e-line direction="col" length="25rpx"></e-line>
			<view class="e-flex-2 e-flex-xy-center">
				<view class="app-public-app-login__tabs__item  " @tap="loginType = 2">
					<text class="keep-all" :class="{'c-333 fw-600': loginType === 2}">{{toI18('邮箱')}}</text>
				</view>
			</view>
			<view class="app-public-app-login__tabs__line e-abso">
				
			</view>
		</view> -->
		<view class="app-public-app-login__form">
			<e-form ref="formRef" labelWidth="0" :borderBottom="false" errorType="toast" :model="form" :rules="rules">
				<e-form-item prop="username" v-show="loginType === 1">
					<view class="app-public-app-login__form__input e-flex-1 e-flex">
						<image src="/pages/public/static/public/phone.png" class="img-36 e-m-r-30"></image>
						<view class="e-flex" v-if="countryAreaList && countryAreaList.length"
							@tap="$goTo('/pages/public/account/countryArea')">
							<image v-if="countryArea.logo" class="img-36 e-m-r-6" :src="countryArea.logo" mode="">
							</image>
							<text class="" v-if="countryArea">+{{countryArea.countryArea}}</text>
							<image class="img-16 e-m-r-10 e-m-l-10" :src="$staticPath('black-arrow.png')" mode="">
							</image>
						</view>
						<e-input v-model="form.username" type="number" :placeholder="toI18('请输入您的手机号')" border="none"
							clearable></e-input>
					</view>
				</e-form-item>
				<e-form-item prop="username" v-show="loginType === 2">
					<view class="app-public-app-login__form__input e-flex-1 e-flex">
						<image src="/pages/public/static/public/mail.png" class="img-36 e-m-r-30"></image>
						<e-input v-model="form.username" :placeholder="toI18('请输入您的邮箱')" border="none"
							clearable></e-input>
					</view>
				</e-form-item>
				<e-form-item prop="password">
					<view class="app-public-app-login__form__input e-flex e-flex-1">
						<image src="/pages/public/static/public/password.png" class="img-36 e-m-r-30"></image>
						<e-input v-model="form.password" type="password" :placeholder="toI18('请输入密码')" border="none"
							passwordIconShow></e-input>
					</view>
				</e-form-item>
			</e-form>
		</view>
		<view class="e-p-t-8 e-p-b-40">
			<view class="app-public-app-login__tips e-flex" @tap="isAgree = !isAgree" v-if="agreeShow||privacyShow">
				<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary" @tap.stop="isAgree = !isAgree" />
				<template v-if="$isEnglishVersion">
					<text class="keep-all e-m-r-10">{{ $t('public.我已阅读并同意') }}</text>
					<navigator class="c-primary keep-all e-m-r-10" url="/pages/public/txt?id=14" v-if="agreeShow"
						@tap.stop>{{ $t('public.登录协议') }}</navigator>
					<text v-if="privacyShow">{{ $t('public.与') }}</text>
				</template>
				<template v-else>
					<text class="keep-all">{{ $t('public.我已阅读并同意') }}</text>
					<navigator class="c-primary keep-all" url="/pages/public/txt?id=14" v-if="agreeShow" @tap.stop>
						{{ $t('public.登录协议') }}</navigator>
					<template v-if="privacyShow">
						<text>{{ $t('public.与') }}</text>
						<navigator class="c-primary keep-all" url="/pages/public/txt?id=15" @tap.stop>
							{{ $t('public.隐私权政策') }}</navigator>
					</template>
				</template>

			</view>
			<view class="e-p-l-50" v-if="$isEnglishVersion && privacyShow">
				<navigator class="c-primary keep-all" url="/pages/public/txt?id=15">{{ $t('public.隐私权政策') }}</navigator>
			</view>
		</view>

		<e-button type="primary" shape="circle" size="large" :text="toI18('登录')" :loading="isLoading"
			:throttleTime="1000" @click="submit"></e-button>
		<view class="e-flex e-flex-end e-p-20 e-m-t-20">
			<!-- <view class="" style="flex:1">
				<text @tap="$goTo('/pages/public/account/forget')">{{ toI18('忘记密码？') }}</text>
			</view>
			<text @tap="$goTo('/pages/public/account/register')">{{ toI18('注册') }}</text> -->
			<text @tap="$goTo('/pages/public/account/forget')">{{ toI18('忘记密码？') }}</text>
		</view>

		<!-- #ifdef APP-PLUS -->
		<!-- <view class="app-public-app-login__other">
			<view class="text-center">
				<text class="e-font-24 c-5c">{{toI18('otherAuth')}}</text>
			</view>
			<view class="e-flex-xy-center e-p-t-40">
				<app-image :size="['80rpx']" src="wechat.png" />
			</view>
		</view> -->
		<!-- #endif -->

	</view>
</template>
<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import { postLogin, getOAuthList, postAppWxLogin } from '@/common/request/api'
	import type { RequestLoginData } from '@/common/request/api'
	import { useBasics, useInit, useUser } from '@/common/stores'
	import {
		useI18n,
		useCurrentInstance,
		useLogin
	} from '@/common/hooks'
	import { page } from '@/common/utils'
	import { storeToRefs } from 'pinia'
	import type {
		FormInstance
	} from '@/uni_modules/endless-ui/typing'
	// #ifdef SUBSCRIPTION || PRIVATE
	import wxInit from '@/common/wxInit';
	// #endif

	const ctx = useCurrentInstance()

	const toI18 = useI18n('public')

	const { registerModel, agreement } = storeToRefs(useBasics())
	const { login } = useLogin()

	const { setTabbarPageIndex } = useInit()
	const userStore = useUser()
	const { countryAreaList, countryArea } = storeToRefs(userStore)

	userStore.getCountryAreaList()

	const loginType = ref(1)//登录类型 1手机号 2邮箱
	const tabChange = (e : { index : number }) => {
		loginType.value = e.index + 1
	}

	const formRef = ref<FormInstance>()
	const form = reactive({
		username: '',
		password: '',
	})

	const rules = ref({
		username: {
			type: 'string',
			required: true,
			message: () => loginType.value === 1 ? toI18('请输入您的手机号') : toI18('请输入您的邮箱'),
			trigger: ['blur']
		},
		password: {
			type: 'string',
			required: true,
			message: () => toI18('请输入密码'),
			trigger: ['blur']
		}
	})

	const OAuthList = ref<string[]>([])

	getOAuthList().then(res => {
		OAuthList.value = res.data.map(item => item.authType)
	})

	const isLoading = ref(false)
	const agreeShow = computed(() => agreement.value.find(item => item.id == 14)?.status === 1)
	const privacyShow = computed(() => agreement.value.find(item => item.id == 15)?.status === 1)
	const isAgree = ref(false)
	const submit = () => {
		if ((agreeShow.value || privacyShow.value) && !isAgree.value) {
			ctx.$toastApp(toI18('请先阅读并同意用户协议'))
			return
		}
		formRef.value?.validate().then(type => {
			if (type) {
				isLoading.value = true
				postLogin({...form,areaCode:countryArea.value.countryArea}).then(res => {
					loginCallBack(res)
				}).finally(() => {
					isLoading.value = false
				})
			}
		})

	}
	type UniLoginParams = Parameters<typeof uni.login>[0]
	const appLogin = (provider : UniLoginParams['provider']) : Promise<any> => {
		return new Promise((resolve, reject) => {
			let params : UniLoginParams = {
				provider,
				success: e => {
					if (provider === 'weixin') {
						resolve(e)
					} else {
						// 登录成功
						uni.getUserInfo({
							provider: provider as any,
							success: function (info) {
								// 获取用户信息成功, info.authResult保存用户信息
								console.log(info)
								resolve(info)
							}
						})
					}
				},
				fail: function (err) {
					reject(err)
				}
			}
			if (provider === 'weixin') {
				params.onlyAuthorize = true
			}
			uni.login(params)
		})
	}

	const wechatLogin = () => {
		appLogin('weixin').then(e => {
			const {
				code
			} = e
			postAppWxLogin({
				code
			}).then(res => {
				if (res.data?.access_token) {
					loginCallBack(res)
				} else {
					ctx.$goTo('/pages/public/account/binding', {
						id: res.data.openid
					})
				}
			})
		})
	}

	// const googleLogin = () => {
	// 	appLogin('google').then(res => {})
	// }
	// const facebookLogin = () => {
	// 	appLogin('facebook').then(res => {})
	// }
	// const appleLogin = () => {
	// 	appLogin('apple').then(res => {})
	// }

	const loginCallBack = (res : RequestLoginData) => {

		login(res.data.access_token)
		// #ifdef PRIVATE || SUBSCRIPTION
		wxInit(false,undefined,true)
		// #endif
		const pagesPath = page(3)
		if (!pagesPath||pagesPath === '/' || pagesPath === 'pages/public/account/appLogin') {
			setTabbarPageIndex(0)
			ctx.$switchTab('/pages/tabbar/index')
		} else {
			ctx.$back(2)
		}

		// ctx.$toastApp(res.msg)
	}
</script>

<style>
	page {
		background-color: #ffffff;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	@include appBem_b(public-app-login) {
		/* #ifdef APP-PLUS */
		padding-bottom: 282rpx;

		.c-5c {
			color: #5C5980;
		}

		/* #endif */




		@include appBem_e(tabs) {
			padding: 0 70rpx;
			// &__item {
			// 	padding: 16rpx 0

			// }
			// &__line{
			// 	width: 48rpx;
			// 	height: 10rpx;
			// 	bottom: -8rpx;
			// 	background-color: var(--color-primary);
			// 	border-radius: 8rpx;
			// 	transition: left 200ms ease-in-out;
			// }

			// @include appWhen(active-left) {
			// 	.app-public-app-login__tabs__line {
			// 		&::after {
			// 			left: calc(25% - 24rpx);
			// 		}
			// 	}
			// }

			// @include appWhen(active-right) {
			// 	.app-public-app-login__tabs__line {
			// 		&::after {
			// 			left: calc(75% - 24rpx);
			// 		}
			// 	}
			// }
		}

		@include appBem_e(form) {
			--e-form-item-padding: 26rpx 0;

			&__input {
				background: #f7f7f7;
				border-radius: 50rpx;
				height: 90rpx;
				padding: 0 40rpx;
			}
		}

		@include appBem_e(tips) {
			width: 600rpx;
			color: #a7aab3;
			margin: 0 auto;

			navigator {
				text-decoration: underline;
			}
		}

		/* #ifdef APP-PLUS */
		@include appBem_e(other) {
			@include fixed-bottom;
			height: 282rpx;
		}

		/* #endif */

	}
</style>